<!doctype html>
<html ng-app="testPadding">
<head>
    <meta charset="utf-8">

    <title>ngDialog padding test</title>

    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <link rel="stylesheet" href="../css/ngDialog.css">
    <link rel="stylesheet" href="../css/ngDialog-theme-default.css">

    <style>
        body {
            height: 4000px;
        }
        .paddingHeader {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            text-align: right;
        }
    </style>
</head>

<body ng-controller="MainCtrl">
    <!-- Buttons and links -->

    <header class="paddingHeader">Fixed header</header>
    <a href="" class="openPaddingLink" ng-click="open()">Open dialog</a>

    <!-- Template -->
    <script type="text/ng-template" id="firstDialogId">
        Wow a thing
    </script>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script>window.angular || document.write('<script src="../bower_components/angular/angular.min.js">\x3C/script>')</script>
    <script src="../js/ngDialog.js"></script>

    <!-- App -->
    <script>
        var app = angular.module('testPadding', ['ngDialog']);

        app.config(['ngDialogProvider', function (ngDialogProvider) {
            ngDialogProvider.setDefaults({
                className: 'ngdialog-theme-default',
            });
        }]);

        app.controller('MainCtrl', function ($scope, $rootScope, ngDialog, $timeout) {

            $scope.open = function () {
                ngDialog.open({ template: 'firstDialogId' });
            };

            $rootScope.$on('ngDialog.setPadding', function (event, padding)
            {
                angular.element( document.querySelector('.paddingHeader') ).css('padding-right', padding + 'px');
            });

        });
    </script>
</body>
</html>
